<template>
  <div class="playpage">
    <div
      class="mask"
      :style="{
        backgroundImage: `url('${
          currentSong.picUrl || currentSong.al.picUrl
        }?imageView=1&type=webp&thumbnail=247x0')`,
      }"
    ></div>
    <div class="head">
      <div @click="$emit('changeShow')" class="back">
        <i class="iconfont icon-a-16-23_fuzhi-03"></i>
      </div>
      <div class="title">
        <p>{{ currentSong.name }}</p>
        <span
          v-for="(item, index) in currentSong.song
            ? currentSong.song.artists
            : currentSong.ar"
          :key="index"
          >{{ item.name }}</span
        >
      </div>
      <i class="iconfont icon-fenxiang1"></i>
    </div>

    <div class="pdpl">
      <transition
        name="fade"
        enter-active-class="animated fadeIn"
        leave-active-class="animated fadeOut"
      >
        <PlayDisc
          v-if="showdisc"
          @click.native="showdisc = false"
          :currentSong="currentSong"
          :playing="playing"
          class="pd"
        ></PlayDisc>
      </transition>
      <transition
        name="fade"
        enter-active-class="animated fadeIn"
        leave-active-class="animated fadeOut"
      >
        <PlayLyric
          v-if="!showdisc"
          class="ly"
          @click.native="showdisc = true"
          :currentSong="currentSong"
          :currentTime="currentTime"
          :playing="playing"
        ></PlayLyric>
      </transition>
    </div>

    <ProgressBar
      class="bar"
      :currentSong="currentSong"
      :playing="playing"
      :currentTime="currentTime"
      :duration="duration"
      @update:crut="$emit('update:crut', $event)"
    ></ProgressBar>
    <div class="foot">
      <i @click="orderlist" v-if="order" class="ficon iconfont icon-shuaxin"></i>
      <i @click="radomlist" v-if="!order" class="ficon iconfont icon-suijibofang1"></i>
      <i
        class="ficon iconfont icon-shangyishou"
        @click="$emit('prev-song')"
      ></i>
      <div class="pp">
        <i
          v-if="!playing"
          @click.stop="$emit('audio-play-handler')"
          class="ficon iconfont icon-24gf-play"
        ></i>
        <i
          v-else
          @click.stop="$emit('audio-pause-handler')"
          class="ficon iconfont icon-bofangzanting"
        ></i>
      </div>

      <i class="ficon iconfont icon-xiayishou" @click="$emit('next-song')"></i>
      <i
        class="ficon iconfont icon-bofangliebiao"
        @click.stop="$parent.listshow = true"
      ></i>
    </div>
  </div>
</template>

<script>
import PlayDisc from "@/components/PlayDisc.vue";
import ProgressBar from "@/components/ProgressBar.vue";
import PlayLyric from "@/components/PlayLyric.vue";
export default {
  props: {
    currentSong: Object,
    playing: Boolean,
    currentTime: Number,
    duration: Number,
  },
  components: {
    PlayDisc,
    ProgressBar,
    PlayLyric,
  },
  data: function () {
    return {
      showdisc: true,
      order:true,
    };
  },
  methods:{
    orderlist:function(){
      this.order=false;
      this.$emit("radomplay",!this.order)
    },
    radomlist:function(){
      this.order=true;
      this.$emit("radomplay",!this.order)
    }
  }
};
</script>

<style lang="less" scoped>
.playpage {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #888;
  .bar {
    margin-top: 30px;
  }
  width: 100vw;
  height: 100vh;
  position: fixed;
  padding: 10px 10px 20px 10px;
  top: 0;
  left: 0;
  z-index: 10;
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    filter: blur(30px) brightness(0.5);
    transform: scale(1.5);
    z-index: -1;
  }
  .pdpl {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    .pd {
      position: absolute;
    }
    .ly {
      position: absolute;
    }
  }
  .head {
    display: flex;
    padding: 0 10px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    i {
      color: white;
      font-size: 20px;
    }
    .title {
      color: #fff;
      text-align: center;
      span {
        font-size: 12px;
        &::after {
          content: " / ";
        }
        &:last-child {
          &::after {
            content: " >";
          }
        }
      }
    }
  }
  .foot {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 20px;
    .ficon {
      color: #fff;
      font-size: 40px;
    }
    .pp {
      width: 60px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 2px solid #fff;
      border-radius: 50%;
    }
  }
}

.animated {
  animation-duration: 1s;
}
</style>